<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>廿四</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: url('./节气界面/img/背景图（节气）.png');
            font-family: 'Microsoft YaHei', sans-serif;
        }

        /* 统一的导航栏样式 */
        .main-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: rgba(255, 250, 240, 0.85);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            align-items: center;
            padding: 0 40px;
            backdrop-filter: blur(6px);
            border-bottom: 1px solid rgba(212, 180, 131, 0.5);
        }

        .nav-buttons {
            display: flex;
            gap: 25px;
            margin-left: auto;
        }

        .nav-button {
            padding: 12px 28px;
            border-radius: 6px;
            background: transparent;
            color: #4A4A4A;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(74, 74, 74, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(8px);
        }

        .nav-button:hover {
            background: rgba(74, 74, 74, 0.1);
            color: #4A4A4A;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .nav-button i {
            font-size: 18px;
        }

        #chart-container {
            margin-top: 100px;
            height: calc(100vh - 100px);
        }

        /* 新的时间轴样式 */
        #time-axis {
            position: fixed;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            height: 70vh;
            width: 80px; 
            background: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            z-index: 2;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(220, 220, 220, 0.6);
        }

        .time-axis-track {
            position: relative;
            width: 6px;
            height: 100%;
            background: rgba(0, 0, 0, 0.08);
            border-radius: 3px;
            padding-bottom: 15px; /* 增加底部内边距，为1月标签腾出空间 */
            box-sizing: border-box;
        }

        .time-axis-progress {
            position: absolute;
            width: 100%;
            background: linear-gradient(to top, #8bc34a, #ffb74d, #f44336, #2196f3);
            border-radius: 3px;
            bottom: 0;
            transition: height 0.2s ease;
        }

        .time-axis-handle {
            position: absolute;
            left: 50%;
            width: 22px;
            height: 22px;
            background: #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            z-index: 10;
            border: 3px solid #4CAF50;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .time-axis-handle:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }

        .time-axis-handle:active {
            transform: translate(-50%, -50%) scale(0.95);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .time-axis-labels {
            position: absolute;
            left: -70px;
            top: 0;
            height: 100%;
            width: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 0;
            pointer-events: none;
        }

        .time-label-container {
            position: absolute;
            right: -60px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* 添加1月特殊样式 */
        .time-label-container[data-month="1"] .time-label-indicator {
            width: 20px;  /* 增加刻度线长度 */
        }

        .time-label-container:hover .time-label {
            color: #205029;
            transform: translateX(-3px);
        }

        .time-label {
            color: #4a7a3d;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

        .time-label-indicator {
            position: absolute;
            left: -20px;
            width: 16px;
            height: 2px;
            background: #8bc34a;
            border-radius: 1px;
        }

        .time-label-container.active .time-label {
            color: #205029;
            font-weight: 600;
        }

        .time-label-container.active .time-label-indicator {
            width: 24px;
            background: #4CAF50;
        }

        .term-tooltip {
            position: absolute;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            width: 280px;
            pointer-events: none;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform-origin: center;
            border: 1px solid #eee;
            z-index: 3;
        }

        .term-tooltip h3 {
            color: #098949;
            margin: 0 0 12px 0;
            font-size: 20px;
        }

        .term-tooltip p {
            color: #666;
            margin: 8px 0;
            line-height: 1.6;
            font-size: 14px;
        }
    </style>
    <script src="./js/echarts (2).js"></script>
    <script src="./js/anime.min.js"></script>
    <script src="./js/lodash.min.js"></script>
</head>

<body>
    <!-- 更新导航栏结构 -->
    <nav class="main-nav">
        <h1 style="color: #8B4513; font-size: 24px;">廿四节气</h1>
        <div class="nav-buttons">
            <button class="nav-button" onclick="window.location.href='../index.html'">主界面</button>
            <button class="nav-button" onclick="window.location.href='../第二界面/关系图.html'">第二界面</button>
            <button class="nav-button" onclick="window.location.href='../第三界面/人界面.html'">第三界面</button>
            <button class="nav-button" onclick="window.location.href='./节气界面/农谚.html'">农谚界面</button>
        </div>
    </nav>

    <div id="chart-container"></div>
    
    <!-- 新的时间轴结构 -->
    <div id="time-axis">
        <div class="time-axis-track">
            <div class="time-axis-progress" id="axis-progress"></div>
            <div class="time-axis-handle" id="axis-handle"></div>
            <div class="time-axis-labels" id="time-labels"></div>
        </div>
    </div>
    
    <div id="term-tooltip" class="term-tooltip"></div>

    <script>
        // 季节颜色映射
        const seasonColors = {
            '春': '#8bc34a',
            '夏': '#ffb74d',
            '秋': '#f44336',
            '冬': '#2196f3'
        };
        const navButtons = document.querySelectorAll('.nav-button');

        navButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                e.preventDefault();
                // 添加页面过渡动画
                anime({
                    targets: 'body',
                    opacity: 0,
                    duration: 400,
                    easing: 'easeInOutQuad',
                    complete: () => {
                        window.location.href = button.onclick.toString().match(/'(.*?)'/)[1];
                    }
                });
            });
        });
        
        // 节气数据
        const solarTermsData = [
            { name: '立春', season: '春', date: '2月3-5日', desc: '春耕备耕开始，检查农具，准备早稻育秧' },
            { name: '雨水', season: '春', date: '2月18-20日', desc: '冬小麦开始返青，江南地区油菜追肥' },
            { name: '惊蛰', season: '春', date: '3月5-7日', desc: '春耕全面展开，防治越冬害虫，果树修剪' },
            { name: '春分', season: '春', date: '3月20-22日', desc: '春播作物播种关键期，小麦进入拔节期' },
            { name: '清明', season: '春', date: '4月4-6日', desc: '早稻插秧，玉米播种，茶园春管关键期' },
            { name: '谷雨', season: '春', date: '4月19-21日', desc: '水稻移栽，棉花播种，防治小麦赤霉病' },

            { name: '立夏', season: '夏', date: '5月5-7日', desc: '夏收作物灌浆关键期，早稻分蘖肥施用' },
            { name: '小满', season: '夏', date: '5月20-22日', desc: '小麦籽粒饱满，油菜收获，水稻晒田控蘖' },
            { name: '芒种', season: '夏', date: '6月5-7日', desc: '夏收夏种关键期，抢收小麦，播种晚稻' },
            { name: '夏至', season: '夏', date: '6月21-22日', desc: '中稻追肥，棉花整枝，防治水稻纹枯病' },
            { name: '小暑', season: '夏', date: '7月6-8日', desc: '早稻收割，晚稻移栽，玉米追肥' },
            { name: '大暑', season: '夏', date: '7月22-24日', desc: '双季稻区抢收抢种，抗旱保苗关键期' },

            { name: '立秋', season: '秋', date: '8月7-9日', desc: '水稻孕穗期管理，玉米授粉期，棉花打顶' },
            { name: '处暑', season: '秋', date: '8月22-24日', desc: '水稻防早衰，玉米灌浆期管理，果园施肥' },
            { name: '白露', season: '秋', date: '9月7-9日', desc: '晚稻抽穗扬花期，冬小麦备耕，采摘秋茶' },
            { name: '秋分', season: '秋', date: '9月22-24日', desc: '秋收秋种关键期，收获中稻，播种冬小麦' },
            { name: '寒露', season: '秋', date: '10月8-9日', desc: '收获晚稻，播种油菜，果树秋季修剪' },
            { name: '霜降', season: '秋', date: '10月23-24日', desc: '冬小麦出苗管理，蔬菜大棚防寒准备' },

            { name: '立冬', season: '冬', date: '11月7-8日', desc: '农田水利建设，油菜越冬管理，果树培土' },
            { name: '小雪', season: '冬', date: '11月22-23日', desc: '冬小麦冬灌，蔬菜储藏，果园清园消毒' },
            { name: '大雪', season: '冬', date: '12月6-8日', desc: '农田休耕养地，温室大棚温度调控' },
            { name: '冬至', season: '冬', date: '12月21-23日', desc: '积肥造肥，果树防冻，冬季修剪' },
            { name: '小寒', season: '冬', date: '1月5-7日', desc: '越冬作物防冻害，温室作物光照管理' },
            { name: '大寒', season: '冬', date: '1月20-21日', desc: '农业机械保养，春耕物资准备，土壤改良' }
        ];

        // 初始化图表
        const chart = echarts.init(document.getElementById('chart-container'));
        let activeTerm = null;
        let isAnimating = false;
        let hoverTimer = null;
        let isDragging = false;

        // 时间轴元素
        const timeAxis = document.getElementById('time-axis');
        const axisTrack = document.querySelector('.time-axis-track');
        const axisProgress = document.getElementById('axis-progress');
        const axisHandle = document.getElementById('axis-handle');
        const labelsContainer = document.getElementById('time-labels');
        const tooltip = document.getElementById('term-tooltip');

        // 创建时间轴月份标签 - 修正顺序（从下到上）
        const monthLabels = [
            { month: 1, name: '1月' },
            { month: 2, name: '2月' },
            { month: 3, name: '3月' },
            { month: 4, name: '4月' },
            { month: 5, name: '5月' },
            { month: 6, name: '6月' },
            { month: 7, name: '7月' },
            { month: 8, name: '8月' },
            { month: 9, name: '9月' },
            { month: 10, name: '10月' },
            { month: 11, name: '11月' },
            { month: 12, name: '12月' },
        ];

        // 计算每个月在年份中的位置百分比（从下到上）
        monthLabels.forEach((label, index) => {
            // 反转位置计算，让1月在底部，12月在顶部
            let position = 100 - (index / (monthLabels.length - 1) * 100);
            
            // 特殊处理1月位置，使其与进度条底部对齐但稍微上移
            if (label.month === 1) {
                position = 96; // 底部对齐但稍微上移
            }
            // 特殊处理2月位置，使其更好地位于1月和3月之间
            else if (label.month === 2) {
                position = 89; // 调整2月位置，使其在1月和3月之间
            }
            
            const elem = document.createElement('div');
            elem.className = 'time-label-container';
            elem.setAttribute('data-month', label.month);
            elem.style.top = `${position}%`;
            elem.innerHTML = `
                <div class="time-label-indicator"></div>
                <div class="time-label">${label.name}</div>
            `;
            
            // 点击月份标签直接跳转
            elem.addEventListener('click', () => {
                const day = getDayFromMonth(label.month);
                updateTimeAxis(day);
                const term = findNearestTerm(day);
                updateHighlight(term);
                showTooltip(term, day);
            });
            
            labelsContainer.appendChild(elem);
        });

        // 处理滑块拖动
        axisHandle.addEventListener('mousedown', startDrag);
        document.addEventListener('mouseup', stopDrag);
        document.addEventListener('mousemove', drag);

        function startDrag(e) {
            e.preventDefault();
            isDragging = true;
            axisHandle.style.transition = 'none';
            axisProgress.style.transition = 'none';
        }

        function stopDrag() {
            if (!isDragging) return;
            isDragging = false;
            axisHandle.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease';
            axisProgress.style.transition = 'height 0.2s ease';
        }

        function drag(e) {
            if (!isDragging) return;
            
            const trackRect = axisTrack.getBoundingClientRect();
            let posY = e.clientY - trackRect.top;
            
            // 限制在轨道范围内
            posY = Math.max(0, Math.min(posY, trackRect.height));
            
            // 计算百分比位置 (0-1)，注意方向是从下到上
            const percentage = 1 - (posY / trackRect.height);
            
            // 计算对应的天数 (0-365)
            const day = Math.round(percentage * 365);
            
            updateTimeAxis(day);
            
            // 找到最近的节气并更新
            const term = findNearestTerm(day);
            updateHighlight(term);
            showTooltip(term, day);
        }

        // 更新时间轴位置
        function updateTimeAxis(day) {
            // 确保day在0-365范围内
            const normalizedDay = day % 365;
            const percentage = normalizedDay / 365;
            // 反转位置计算，让位置从下到上增长
            const position = 100 - (percentage * 100);
            
            // 更新滑块位置
            axisHandle.style.top = `${position}%`;
            
            // 更新进度条
            axisProgress.style.height = `${percentage * 100}%`;
            
            // 更新月份标签激活状态
            const activeMonth = getMonthFromDay(normalizedDay);
            updateMonthLabels(activeMonth);
        }

        // 更新月份标签的激活状态
        function updateMonthLabels(activeMonth) {
            document.querySelectorAll('.time-label-container').forEach(label => {
                const month = parseInt(label.getAttribute('data-month'));
                if (month === activeMonth) {
                    label.classList.add('active');
                } else {
                    label.classList.remove('active');
                }
            });
        }

        // 鼠标悬停交互
        chart.on('mouseover', ({ name }) => {
            const term = solarTermsData.find(t => t.name === name);
            clearTimeout(hoverTimer);
            
            // 更新时间轴
            const day = getTermDay(term.date);
            updateTimeAxis(day);
            
            showTooltip(term, day);
        });

        chart.on('mouseout', () => {
            hoverTimer = setTimeout(() => {
                anime({
                    targets: tooltip,
                    opacity: 0,
                    scale: 0.9,
                    duration: 200
                });
            }, 200);
        });

        // 点击跳转功能
        chart.on('click', ({ name }) => {
            const term = solarTermsData.find(t => t.name === name);
            window.location.href = `./节气界面/立冬.html`;
        });

        // 核心功能函数
        function updateHighlight(term) {
            chart.dispatchAction({
                type: 'highlight',
                name: term.name,
                animation: { duration: 300, easing: 'quadraticOut' }
            });
            if (activeTerm && activeTerm !== term.name) {
                chart.dispatchAction({ type: 'downplay', name: activeTerm });
            }
            activeTerm = term.name;
        }

        function showTooltip(term, day) {
            clearTimeout(hoverTimer);
            const angle = (day / 365) * 360 - 90;
            const x = Math.cos(angle * Math.PI / 180) * 200 + window.innerWidth / 2;
            const y = Math.sin(angle * Math.PI / 180) * 200 + window.innerHeight / 2;

            anime({
                targets: tooltip,
                left: `${x}px`,
                top: `${y}px`,
                opacity: 1,
                scale: [0.95, 1],
                duration: 300,
                easing: 'easeOutBack',
                begin: () => {
                    tooltip.innerHTML = `
                        <h3 style="color:${seasonColors[term.season]}">${term.name}</h3>
                        <p>📅 ${term.date}</p>
                        <p>${term.desc}</p>
                    `;
                }
            });
        }

        // 工具函数
        function getTermDay(dateStr) {
            const [month, days] = dateStr.split('月');
            const [startDay] = days.replace('日', '').split('-').map(Number);
            
            let monthNum = parseInt(month);
            // 将月份直接映射到天数，1月是0-30天，12月是330-360天
            return (monthNum - 1) * 30 + startDay;
        }

        function getMonthFromDay(day) {
            // 确保day在0-365范围内
            const normalizedDay = day % 365;
            // 将天数映射到月份 (1-12)
            return Math.floor(normalizedDay / 30) + 1;
        }

        function getDayFromMonth(month) {
            // 确保month在1-12范围内
            const normalizedMonth = ((month - 1) % 12) + 1;
            return (normalizedMonth - 1) * 30 + 15; // 定位到月中
        }

        function findNearestTerm(day) {
            // 确保day在0-365范围内
            const normalizedDay = day % 365;
            
            return solarTermsData.reduce((nearest, term) => {
                const termDay = getTermDay(term.date);
                // 考虑循环情况，例如12月31日和1月1日其实很近
                const dist1 = Math.abs(termDay - normalizedDay);
                const dist2 = Math.abs(termDay - (normalizedDay + 365));
                const dist3 = Math.abs(termDay + 365 - normalizedDay);
                const minDist = Math.min(dist1, dist2, dist3);
                
                const nearestTermDay = getTermDay(nearest.date);
                const nearestDist1 = Math.abs(nearestTermDay - normalizedDay);
                const nearestDist2 = Math.abs(nearestTermDay - (normalizedDay + 365));
                const nearestDist3 = Math.abs(nearestTermDay + 365 - normalizedDay);
                const nearestMinDist = Math.min(nearestDist1, nearestDist2, nearestDist3);
                
                return minDist < nearestMinDist ? term : nearest;
            }, solarTermsData[0]);
        }

        // ECharts配置
        const option = {
            title: {
                text: '廿四节气时间分布',
                subtext: '拖动右侧时间轴或点击节气探索',
                left: 'center',
                textStyle: {
                    color: '#2c7a53',
                    fontSize: 24,
                    fontWeight: 'bold'
                }
            },
            series: [{
                type: 'pie',
                radius: ['20%', '75%'],
                roseType: 'radius',
                itemStyle: {
                    color: ({ data }) => seasonColors[data.season],
                    borderWidth: 2,
                    borderColor: '#fff',
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                },
                label: {
                    show: true,
                    formatter: '{b}',
                    fontSize: 14,
                    fontWeight: 'bold',
                    color: '#333'
                },
                emphasis: {
                    scale: true,
                    scaleSize: 15,
                    itemStyle: {
                        shadowBlur: 20,
                        shadowColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    label: {
                        fontSize: 16,
                        color: '#2c7a53'
                    }
                },
                data: solarTermsData.map(term => ({
                    name: term.name,
                    value: 15,
                    season: term.season
                })),
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDuration: 600
            }]
        };

        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());

        // 初始化时间轴位置（默认选中立春）
        setTimeout(() => {
            const initialTerm = solarTermsData[0]; // 立春
            const initialDay = getTermDay(initialTerm.date);
            updateTimeAxis(initialDay);
            updateHighlight(initialTerm);
        }, 500);
    </script>
</body>

</html>
